<template>
    <div id="Login">
         <div class="cover">
             <div id="leftPanel">
                   <div class="leftTop">
                        <div class="circle">
                            <span>校园管理</span>
                        </div>
                        <div class="circle">
                            <span>业务分析</span>
                        </div>
                        <div class="circle">
                            <span>学生管理</span>
                        </div>
                   </div>
                   <div class="leftBottom">
                         <ul>
                            <li>
                                <span class="glyphicon glyphicon-th-large"></span>
                                <span>上门管理</span>
                            </li>
                            <li>
                                <span class="glyphicon glyphicon-user"></span>
                                <span>学生管理</span>
                            </li>
                            <li>
                                <span class="glyphicon glyphicon glyphicon-home"></span>
                                <span>校区管理</span>
                            </li>
                            <li>
                                <span class="glyphicon glyphicon-signal"></span>
                                <span>数据分析</span>
                            </li>
                            <li>
                                <span class="glyphicon glyphicon-map-marker"></span>
                                <span>城市管理</span>
                            </li>
                        </ul>
                   </div>
             </div>

                <div id="rightPanel">
                    <div class="rightTop">
                        <span>新研科技</span>
                    </div>
                    <div class="rightCenter">
                        <div class="loginInput">
                            <input type="text" id="userName" v-model="userName">
                        </div>
                        <div class="loginInput">
                            <input id="password" type="password" v-model="password">
                        </div>
                        <div class="rememberme">
                            <el-switch style="margin-right:10px"
                            active-color="#13ce66"
                            inactive-color="#C0C0C0"
                            v-model="rememberMe"
                            ></el-switch> 记住我
                        </div>
                    </div>
                    <div class="rightBottom">
                        <el-button type="success" @click="loginIn">登录</el-button>
                    </div>
                </div>
         </div>
    </div>
</template>

<script>
import qs from  'qs';
import Vue from 'vue'
export default {
    data(){
        return {
            userName: '',
            password: '',
            rememberMe: true,
            showLoginPanel: false
        }
    },
    methods: {
        loginIn(){
            this.$http.post(window.baseURL+'/backstage/account/login',
                qs.stringify({accountName: this.userName,password:this.password})  
            )
            .then((response)=>{
                var res = response.data;
                if(res.success){
                    localStorage.removeItem("accessToken")
                    localStorage.setItem("accessToken",response.data.data.account.token);
                    localStorage.setItem("responseData",JSON.stringify(res.data));
                    Vue.prototype.$token = localStorage.getItem("accessToken");
                    this.$router.push({name: 'home'})
                }else{
                    throw new Error("登录失败")
                }
            })
            .catch((error)=>{
                alert("错误");
            })
        }
    },
    created(){
       
    }
}
</script>

<style lang="scss" scoped>

 #Login {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-image: url('../../assets/loginBG.jpg');
        background-position: right top;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: cover;
        .cover {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            #leftPanel {
                width: 70%;
                height: 100%;
                display: flex;
                flex-direction: column;
                .leftTop {
                    width: 100%;
                    height: 70%;
                    // display: flex;
                    // justify-content: center;
                    // align-items:center;
                    .circle {
                        width: 200px;
                        height: 200px;
                        background-color: rgba(216, 67, 67, 0.5);
                        border-radius: 100px;
                        display: flex;
                        color: white;
                        justify-content: center;
                        align-items: center;
                        &:nth-child(1){
                             position: absolute;
                             top: 17%;
                             left: 27%;
                             background-color: rgba(68, 191, 221, 0.5);
                        }
                        &:nth-child(2){
                             position: absolute;
                             top: 33%;
                             left: 22%;
                            background-color: rgba(60, 246, 174, 0.678);

                        }
                        &:nth-child(3){
                             position: absolute;
                              top: 33%;
                              left: 32%;
                              background-color: rgba(216, 67, 67, 0.5);

                        }
                    }
                   
                }
                .leftBottom {
                    width: 100%;
                    height: 30%;
                    color: white;
                    ul {
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        li {
                            margin-right: 80px;
                            display: flex;
                            flex-direction: column;
                            span {
                                margin-top: 20px;
                                text-align: center;
                               
                            }
                            span:nth-child(1){
                                font-size: 60px;
                                 color: rgba(255, 255, 255, 0.5)
                            }
                        }
                    }
                }
            }
            #rightPanel{
                width: 30%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.6);
                display: flex;
                flex-direction: column;
                .rightTop {
                    width: 100%;
                    height: 40%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: bottom;
                    font-size: 60px;
                    color: rgba(255, 255, 255, 0.6);
                    text-align: center;
                }
                .rightCenter {
                    width: 100%;
                    height: 30%;
                    display: flex;
                    justify-content: flex-start;
                    flex-direction: column;
                    align-items: center;                    
                    .loginInput {
                        width: 100%;
                        height: 50px;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        margin-bottom: 20px;
                        input {
                            width: 70%;
                            height: 100%;
                            margin-left: 70px;
                            outline: none;
                            background-color: rgba(0, 0, 0, 0.0);
                             border: none;
                            border-bottom: 1px solid lightgray;
                        }
                    }
                    .rememberme{
                            width: 100%;
                            height: 44px;
                            display: flex ;
                            flex-direction: row ;
                            justify-content: flex-start;
                            align-items: center;
                            margin-left: 135px;
                            
                        }
                }
                .rightBottom {
                    width: 100%;
                    height:30%;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                    button {
                        width: 70%;
                    }
                }
            }
        }
        .loginPanel{
            position: absolute;
            width: 100%;
            height: 300px;
            background: rgba(0, 0, 0, 0.5);
            top: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            .loginInputPanel {
                width: 400px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }
            
        }
    }
</style>
